<template>
  <!-- 新增广告 -->
  <div class="app-container">
    <!-- 广告信息 -->
    <el-card shadow="never">
      <div slot="header"
           class="clearfix">
        <span>广告信息</span>
      </div>
      <div class="text item">
        <el-descriptions :column="1"
                         :colon="false"
                         :labelStyle="labelStyle">
          <el-descriptions-item label="图片">
            <el-image :src="infoForm.file"></el-image>

          </el-descriptions-item>
          <el-descriptions-item label="广告ID">{{infoForm.idStr}}</el-descriptions-item>
          <el-descriptions-item label="广告类型">{{infoForm.type}}</el-descriptions-item>
          <el-descriptions-item label="广告标签">
            <el-tag v-for="(item,index) in infoForm.labelList"
                    :key="index"
                    :type="tag_type[index]"
                    effect="dark">{{item.name}}</el-tag>

          </el-descriptions-item>
          <el-descriptions-item label="投放区域">{{infoForm.scope}}</el-descriptions-item>
          <el-descriptions-item label="投放位置">{{infoForm.position}}</el-descriptions-item>
          <el-descriptions-item label="广告名称">{{infoForm.name}}</el-descriptions-item>
          <el-descriptions-item label="广告链接">{{infoForm.url}}</el-descriptions-item>
          <el-descriptions-item label="投放时间">{{infoForm.start}}</el-descriptions-item>
          <el-descriptions-item label="剩余天数">{{infoForm.item}}</el-descriptions-item>
          <el-descriptions-item label="每次点击金额">{{infoForm.price}}</el-descriptions-item>
          <el-descriptions-item label="预算金额">{{infoForm.budget}}</el-descriptions-item>
          <el-descriptions-item label="剩余金额">{{infoForm.balance}}</el-descriptions-item>
          <el-descriptions-item label="点击次数">{{infoForm.hitNum}}</el-descriptions-item>
        </el-descriptions>

      </div>
    </el-card>

    <!-- 价格设置 -->
    <el-card shadow="never">
      <div slot="header"
           class="clearfix">
        <span>点击数据</span>
      </div>
      <div class="">
        <BarChart></BarChart>
      </div>
    </el-card>

  </div>
</template>

<script>

import BarChart from "@/wss/components/echarts/BarChart.vue"

import {
  provincesList,
  cityList
} from '@/wss/utils/area/index.js'
import { getAdListApi, getAdAddApi } from '@/wss/api/systemManagement/advert/advert.js'

import { getListDataApi } from "@/wss/api/label";
import { getBase64 } from "@/wss/utils/handleImage.js";


export default {
  components: {
    BarChart
  },

  data () {
    return {

      disabled: false,

      // 标签样式
      labelStyle: {
        width: '200px'
      },


      // el-tag
      tag_type: ['none', "success", 'info', 'warning', 'danger', 'none', "success", 'info', 'warning', 'danger'],

      /**
       * 省份 市区
       * provincesList,
       * citysList,
       */
      provincesList: undefined,
      citysList: undefined,
      province: undefined,
      city: undefined,
      cityDisabled: true,  // 市区 是否显示
      labelListData: undefined,  // 标签数据


      // 广告信息表单 
      infoForm: {
        userId: undefined, // 用户来的
        name: undefined,
        type: undefined,
        labelList: [],
        url: undefined,
        scope: undefined,
        position: undefined,
        start: undefined,
        end: undefined,
        status: "0",
        base64: undefined, //img base64
        filename: undefined,  //img file 名字
      },


      priceForm: {
        price: undefined,
        budget: undefined, //预算金额

      },
      priceRules: {
        price: [
          { required: true, message: '请输入点击价格', trigger: 'blur' },
        ],
        budget: [
          { required: true, message: '请选择预算金额', trigger: 'blur' }
        ],
      },

      /**
       * 广告标签
      */
      labelDataList: [],
      /**
       * 广告类型
      */
      typeDataList: [
        {
          label: "图文广告",
          value: 1
        },
        {
          label: "视频广告",
          value: 2
        },
      ],
      /**
       * 投放位置
      */
      positionDataList: [
        {
          label: "放心里",
          value: 1
        },
        {
          label: "投个🔨",
          value: 2
        },
      ],
    }
  },
  mounted () {
    this.provincesList = provincesList
    this.getAdListApiMet({ id: this.$route.query.id })
    this.getListDataApiMet()
  },
  methods: {
    areaData (data) {
      console.log('aaa:', data)
      // provincesList: undefined,
      // citysList: undefined,
      // province: undefined,
      // city: undefined,
      let ID = data[0]
      let CODE = data[1]

      if (this.city == undefined) {
        this.citysList = cityList.filter((item, index, array) => {
          if (index != 0 && ID == item.pid) {
            return true
          }
        })
        this.cityDisabled = false
      } else {
        this.infoForm.scope = CODE
      }

      console.log('info:', this.infoForm)
    },
    // 获取列表--标签 api
    async getListDataApiMet (pagination = null) {
      let result = await getListDataApi(pagination).then((res) => res);
      if (result.code == 200) {
        console.log(result.rows, "标签管理返回数据");
        // this.tableList = result.rows;
        this.labelDataList = result.rows
        // this.pagination.total = result.total;
      }
    },
    // 广告列表
    async getAdListApiMet (data) {
      console.log(data)
      let result = await getAdListApi(data)
      console.log('广告列表：', result)

      this.infoForm = result.rows[0]
    },
    // 添加接口 --广告信息
    async getAdAddApiMet (data) {
      let result = await getAdAddApi(data)
      console.log(result)
    },

    // 图片上传----------------- S

    // 上传img 勾子
    changeImgInfo (files, fileList) {
      console.log(files)
      console.log(typeof fileList)

      getBase64(files.raw).then(res => {
        this.infoForm.base64 = res.split(',')[1]

        // let blodImage = convertBase64ToBlob(res)
        // console.log("res:", URL.createObjectURL(blodImage))

      })

      this.infoForm.filename = files.name
    },
    // 限制上传个数
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 长图片`);

    },


    // 删除勾子
    handleRemoveImg (files) {
      console.log(files)
      this.$refs.pictureUpload.uploadFiles = []
    },


    // 图片上传----------------- E


  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: rgba(245, 245, 245, 1);
  .el-card {
    margin-top: 20px;
    border: none;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    width: 700px;

    .el-tag {
      margin-right: 10px;
    }
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .col-button {
    margin-top: 20px;
    text-align: center;
    .el-button {
      padding: 10px 60px;
    }
  }
}
</style>